<template>
    <ElCard class="marginBottom">
        <ElForm inline>
            <ElFormItem label="参数名" style="margin-bottom: 0;">
                <ElInput v-model="searchConfigName" placeholder="请输入参数名" maxlength="30" show-word-limit />
            </ElFormItem>
            <ElFormItem label="参数键" style="margin-bottom: 0;">
                <ElInput v-model="searchConfigKey" placeholder="请输入参数键" maxlength="30" show-word-limit />
            </ElFormItem>
            <ElFormItem label="系统参数" style="margin-bottom: 0;">
                <ElSelectV2 v-model="searchConfigIsSystem" clearable placeholder="请选择参数类型" style="width: 240px"
                    :options="selectOptions" />
            </ElFormItem>
            <ElFormItem style="margin-bottom: 0;">
                <ElButton @click="onSearchConfig" type="primary">搜索</ElButton>
                <ElButton @click="onReset" type="primary">重置</ElButton>
            </ElFormItem>
        </ElForm>
    </ElCard>
    <ElCard>
        <template #header>
            <ElButton type="primary" @click="onAddConfig" v-hasPermi="['sys:config:insert']">新增参数</ElButton>
        </template>

        <ElTable :data="resultData.records" v-loading="isLoading">
            <ElTableColumn label="序号" prop="name" width="150">
                <template #="{ row, $index }: { row: SysConfigVO, $index: number }">
                    {{ $index + 1 }}
                </template>
            </ElTableColumn>
            <ElTableColumn label="参数名" prop="name" />
            <ElTableColumn label="参数键" prop="configKey" />
            <ElTableColumn label="参数值" prop="configValue" />
            <ElTableColumn label="系统参数">
                <template #="{ row, $index }: { row: SysConfigVO, $index: number }">
                    {{ row.isSystemConfig == SysConfigType.IS_SYSTEM ? "是" : "否" }}
                </template>
            </ElTableColumn>
            <ElTableColumn label="备注" prop="comment" />
            <ElTableColumn label="创建时间">
                <template #="{ row, $index }: { row: SysConfigVO, $index: number }">
                    {{ row.createTime }}
                </template>
            </ElTableColumn>
            <ElTableColumn label="修改时间">
                <template #="{ row, $index }: { row: SysConfigVO, $index: number }">
                    {{ row.modifyTime }}
                </template>
            </ElTableColumn>
            <ElTableColumn label="操作" width="350px">
                <template #="{ row, $index }: { row: SysConfigVO, $index: number }">
                    <ElButton type="primary" @click="onShowConfig(row)" v-hasPermi="['sys:config:query']">详情</ElButton>
                    <ElButton type="warning" @click="onEditConfig(row)" v-hasPermi="['sys:config:update']">编辑</ElButton>
                    <Popconfirm :title="`确定删除${row.name}?`" icon="Delete" @confirm="onDeleteConfig(row)">
                        <ElButton type="danger" v-hasPermi="['sys:config:delete']">删除</ElButton>
                    </Popconfirm>
                </template>
            </ElTableColumn>
        </ElTable>
        <template #footer>
            <Pagination v-model="resultData" @pageInfoChange="handleQuery"></Pagination>
        </template>
    </ElCard>

    <!-- 参数 新增/编辑/详情 对话框 -->
    <ElDialog v-model="dialogInfo.show" :title="dialogInfo.title" width="700px" :show-close="false"
        :close-on-press-escape="false" :close-on-click-modal="false">
        <ElForm ref="formInstance" :rules="checkFormRoles" :model="formInfo" label-width="auto"
            :disabled="dialogInfo.disable">
            <ElFormItem label="参数名" prop="name">
                <ElInput v-model="formInfo.name" placeholder="请输入参数名" maxlength="30" show-word-limit />
            </ElFormItem>
            <ElFormItem label="参数键" prop="configKey">
                <ElInput v-model="formInfo.configKey" placeholder="请输入参数键" maxlength="30" show-word-limit />
            </ElFormItem>
            <ElFormItem label="参数值" prop="configValue">
                <ElInput v-model="formInfo.configValue" placeholder="请输入字典值" maxlength="30" show-word-limit />
            </ElFormItem>
            <ElFormItem label="系统参数" prop="isSystemConfig">
                <ElRadioGroup v-model="formInfo.isSystemConfig">
                    <ElRadio :value="SysConfigType.IS_SYSTEM">是</ElRadio>
                    <ElRadio :value="SysConfigType.NOT_SYSTEM">否</ElRadio>
                </ElRadioGroup>
            </ElFormItem>
            <ElFormItem label="备注" prop="comment">
                <ElInput v-model="formInfo.comment" type="textarea" placeholder="请输入备注" maxlength="50"
                    show-word-limit />
            </ElFormItem>
        </ElForm>
        <template #footer>
            <ElButton @click="hideDialog">取消</ElButton>
            <ElButton type="primary" @click="submitFormData()">确定</ElButton>
        </template>
    </ElDialog>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElButton, ElCard, ElDialog, ElForm, ElFormItem, ElInput, ElRadio, ElRadioGroup, ElSelectV2, ElTable, ElTableColumn, type FormRules } from "element-plus";
import { addConfig, deleteConfig, queryConfigPage, updateConfig } from "@/api/sysConfig/sysConfig";
import { SysConfigType, sysConfigVOToDTO, type SysConfigDTO, type SysConfigFiltDTO, type SysConfigVO } from "@/api/sysConfig/sysConfigType";
import { usePageQuery } from "@/hook/useQuery";
import { useFormDialog } from "@/hook/useDialog";
import Pagination from "@/components/custom/Pagination.vue";
import Popconfirm from "@/components/custom/Popconfirm.vue";

/**
 * 搜索筛选参数名
 */
const searchConfigName = ref<string>()
/**
 * 搜索筛选参数键
 */
const searchConfigKey = ref<string>()
/**
 * 搜索筛选是否为系统参数
 */
const searchConfigIsSystem = ref<number>()
/**
 * 搜索筛选状态的下拉选项
 */
const selectOptions = [
    {
        label: "否",
        value: 0
    },
    {
        label: "是",
        value: 1
    }
]

/**
 * 新增参数
 */
const onAddConfig = () => {
    showDialog('新增参数', undefined, () => addConfig(formInfo.value))
}

/**
 * 修改参数
 * @param sysConfigVO 要修改的参数
 */
const onEditConfig = (sysConfigVO: SysConfigVO) => {
    showDialog('编辑参数', sysConfigVOToDTO(sysConfigVO), () => updateConfig({ id: sysConfigVO.id }, formInfo.value))
}

/**
 * 删除参数
 * @param sysConfigVO 要删除的参数
 */
const onDeleteConfig = async (sysConfigVO: SysConfigVO) => {
    await deleteConfig({ id: sysConfigVO.id })
    handleQuery()
}

/**
 * 进入参数详情页面
 * @param identifier 
 */
const onShowConfig = (sysConfigVO: SysConfigVO) => {
    showDialog('参数详情', sysConfigVOToDTO(sysConfigVO), undefined)
}

/**
 * 封装查询方法
 */
const {
    handleQuery, // 封装后的查询方法
    handleParamChange,
    resultData, // 查询到的数据
    isLoading   // 是否正在查询
} = usePageQuery<SysConfigFiltDTO, SysConfigVO>(queryConfigPage)

/**
 * 搜索
 */
const onSearchConfig = () => {
    handleParamChange({
        name: searchConfigName.value,
        configKey: searchConfigKey.value,
        isSystemConfig: searchConfigIsSystem.value
    })
    handleQuery()
}

/**
 * 重置搜索条件
 */
const onReset = () => {
    searchConfigName.value = undefined
    searchConfigKey.value = undefined
    searchConfigIsSystem.value = undefined
    onSearchConfig()
}

/**
 * 参数 新增/编辑/详情 对话框相关内容
 */
const {
    showDialog,
    hideDialog,
    submitFormData,
    dialogInfo,
    formInfo,
    formInstance
} = useFormDialog<SysConfigDTO>(() => handleQuery())

/**
 * 对话框校验规则
 */
const checkFormRoles = reactive<FormRules<SysConfigDTO>>({
    name: [
        { required: true, message: '请输入参数名称', trigger: 'blur' },
        { min: 2, max: 30, message: '参数名称长度为2 - 30', trigger: 'blur' }
    ],
    configKey: [
        { required: true, message: '请输入参数键', trigger: 'blur' },
        { min: 2, max: 30, message: '参数键长度为2 - 30', trigger: 'blur' }
    ],
    configValue: [
        { required: true, message: '请输入参数值', trigger: 'blur' },
        { min: 2, max: 30, message: '参数值长度为2 - 30', trigger: 'blur' }
    ],
    isSystemConfig: [
        { required: true, message: '请选择是否为系统参数', trigger: 'blur' },
    ],
    comment: [
        { max: 50, message: '备注长度最大为50', trigger: 'blur' }
    ]
})
</script>

<style scoped lang="scss"></style>
